<script setup>

import Paging from "@/views/system/component/paging.vue";
const tableData=[
  {id:'124144',
    address:'已过七天无理由退款',
    account:'售后审核',
    name:'商家',
    num:'1',
  },
  {id:'124144',
    address:'已过七天无理由退款',
    account:'售后审核',
    name:'商家',
    num:'1',
  },
  {id:'124144',
    address:'已过七天无理由退款',
    account:'售后审核',
    name:'商家',
    num:'1',
  },
  {id:'124144',
    address:'已过七天无理由退款',
    account:'售后审核',
    name:'商家',
    num:'1',
  },
  {id:'124144',
    address:'已过七天无理由退款',
    account:'售后审核',
    name:'商家',
    num:'1',
  },
  {id:'124144',
    address:'已过七天无理由退款',
    account:'售后审核',
    name:'商家',
    num:'1',
  },


]
function handleSwitchChange(row) {
  console.log('Switch changed for row:', row);
  // 这里可以执行更新数据状态的操作
}
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: '售后审核',
    label: '售后审核',
  },
  {
    value: 'Option2',
    label: '售后审核',
  },
  {
    value: 'Option3',
    label: '售后审核',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
]


const activeName = ref('first')

const handleClick = (tab, event) => {
  console.log(tab, event)
}
</script>

<template>
  <div>
    <div class="title">
      审核话术管理
    </div>
    <div class="Box">
      <header>
        <div class="topBox">
          <div>
            <div>服务支持：</div>
            <input type="text">
          </div>
          <div>
            <div>功能：</div>
            <el-select
                v-model="value"
                filterable
                placeholder="请选择"
                style="width: 260px"
            >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </div>
          <el-button>搜索</el-button>
          <el-button>重置</el-button>
        </div>
        <div>
          <el-button>新建服务</el-button>
        </div>
      </header>
      <main>
        <div class="table">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="平台" name="second"></el-tab-pane>
            <el-tab-pane label="商家" name="third"></el-tab-pane>
            <el-tab-pane label="供应商" name="fourth"></el-tab-pane>
            <el-tab-pane label="用户" name="five"></el-tab-pane>
          </el-tabs>
          <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#EEEEEE' ,border: '0.5px solid #DBDBDB'}">
            <el-table-column prop="id" label="类具ID"/>
            <el-table-column prop="address" label="描述" />
            <el-table-column prop="account" label="功能" />
            <el-table-column prop="name" label="使用端"/>
            <el-table-column prop="num" label="排序"/>
            <el-table-column fixed="right" label="操作" width="300">
              <template #default style="display: flex">
                <el-button @click="edit" class="btn">编辑</el-button>
                <el-button @click="enable" class="btn">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <paging></paging>
      </main>
    </div>
  </div>
</template>

<style scoped lang="scss">
.title{
  margin: 10px;
}
.Box{
  display: flex;
  flex-direction: column;

  header{
    display: flex;
    background-color: #FFFFFF;
    flex-direction: column;
    margin-bottom: 26px;
    padding: 20px;
    .topBox{
      display: flex;align-content: center;
      div{
        display: flex;
        align-content: center;
      }
      el-button{
        margin-left: 10px;
      }
    }
  }
  main{
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding: 20px;
  }
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>